#loading {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 4px;
    z-index: 9999 !important;
    border-radius: 10%;
    background:rgb(212, 212, 212);
    -webkit-box-shadow: 0 0 10px rgba(253, 253, 253, 0.92), 0 0 30px rgba(235, 232, 232, 0.34), 0 0 12px rgba(244, 246, 248, 0.52), 0 0 21px rgba(247, 247, 248, 0.92), 0 0 34px rgba(234, 237, 240, 0.78), 0 0 54px rgba(244, 246, 248, 0.92);
    box-shadow: 0 0 10px rgba(253, 253, 253, 0.92), 0 0 30px rgba(235, 232, 232, 0.34), 0 0 12px rgba(244, 246, 248, 0.52), 0 0 21px rgba(247, 247, 248, 0.92), 0 0 34px rgba(234, 237, 240, 0.78), 0 0 54px rgba(244, 246, 248, 0.92);
    &.active {
        -webkit-animation: loading-anim 1s ease-in-out infinite;
        animation: loading-anim 1s ease-in-out infinite;
    }
}

@-webkit-keyframes loading-anim {
    from {}
    to {
        .transform(translateX(200%))
    }
}

@keyframes loading-anim {
    from {}
    to {
        .transform(translateX(200%))
    }
}

.fade,
.fade-scale {
    opacity: 0;
    &.in {
        opacity: 1;
        .transform(none);
    }
}

.fade {
    .transition(.4s);
    .transform(translateY(50px));
}

.fade-scale {
    .transition(.6s);
    .transform(translate(10%, 20%) scale(.6));
}

@media screen and (max-width:480px) {
    .fade,
    .fade-scale {
        opacity: 1;
        .transform(none);
    }
}
